定義與說明

• Ajax 是「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術）的縮寫

• Ajax 並不是單一的技術，而是一套 綜合性的瀏覽器端網頁開發"技術"

• 最大優勢，網頁不用重新加載整理，就能即時地透過瀏覽器跟伺服器交換數據，並部分更新網頁內容

工作原理

最早期的使用流程

• 傳送前
  1.事件觸發
  2.建立了一個 XMLHttpRequest 物件
  3.設定文件格式
  4.發送要求

• 傳送後
  5.資料回傳處理
  6.資料處理與判斷

// --------------1.事件觸發--------------------------------

submit.addEventListener('click', signup);

// 函式
function signup(){

  var account = {}; //用來儲存使用者輸入的資訊的物件
  account.email = '123@mail.com';
  account.password = '123';
  
//--------------2.建立了一個 XMLHttpRequest 物件--------------
  
  var xhr = new XMLHttpRequest();
  
// -------------3.設定文件格式--------------------------------

    //open(请求的类型,url,async：true（异步）或 false（同步）)
  xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);
  
   // 向請求添加  HTTP Header
  xhr.setRequestHeader('Content-type','application/json');
  
   // 將要傳送的物件資料轉為字串型別
  var data = JSON.stringify(account);
  
//-------------4.發送要求------------------------------------

  xhr.send(data);
  
//-------------5.資料回傳處理--------------------------------- 

  xhr.onload = function(){
  
    //將回傳的資料轉為物件來作後續運用
    var callbackdata = JSON.parse(xhr.responseText);
    
//-------------6.資料處理與判斷-------------------------------
    var result = callbackdata.success;
    if(result){
      alert(callbackdata.message);      
    } else {
      alert(callbackdata.message);
    }
  }
}

現在常見使用的套件與方法

• jQuery 的 $.ajax()
• HTML5 的 Fetch API
• axios 為 JavaScript 函式庫

實作使用

前言

寫了幾篇筆記後，內心一直在掙扎，一方面是覺得這些基礎的東西都已經有人寫過了，整理後又有那些已看過文章的影子，就是有種抄襲別人的感覺，另一方面是資料找的更細或是想寫得更深，又覺得像是在強迫自己硬擠東西出來，而且我個人學習的方式就是喜歡看條列式的重點，寫得要細就可能得拋棄這樣子的筆記方式，所以想換個口味，換成在工作實務上，使用過的技術，除了消除自己的"冒牌者症候群"外，還可以將工作上的學習內化輸出，以後才能找更好的工作。

正文

在工作上(公司類似於etoro)，會使用到 jQuery 的 $.ajax() ，主要是用在登入帳號、活動資料串接等等，一開始在職訓的時候只使用過套件 axios ，加上對於資料傳接沒什麼概念，在初期接觸專案的時候，真的是一頭霧水呀!不過執行順過一遍流程就大約知道程式的整個邏輯運作，先登入帳號，串接判斷激活，判斷活動狀態，串接用戶參與活動blablabla，事情交互一多整個就雜呀!後來做流程筆記使用 Draw.io 將交互判斷流程與 API 平台路徑紀錄，回頭要修改真的是清爽很多。

jQuery ajax - ajax() 方法文件

• 使用 $.extend 新增方法去包裝核心主要的部分。

$.extend({
    //核心主要設定
     MainAjax: function(option,callbackSuc,callbackErr){
        $.ajax({
                headers: {
                     Accept: "application/json; charset=utf-8"
                },
                type: option.type,
                url: option.url,
                async: true,
                data: option,
                dataType: "json",
                success: function (data) {
                     callbackSuc(data);
                },
                error: function (data) {
                    callbackErr(data);
                }
            });
     },
    //個別事件
    getStart:function(accountData){
        // 參數新增，也可改寫成 accountData.url = "https://example.com" 以此類推
        let  accountData = $.extend({
            "url":"https://example.com",
            "type":"get"
        });
        
        $.MainAjax(accountData,
        
          // 資料傳遞成功後續動作
          function(){
            $.otherEvent();
            
          // 錯誤回報
        },function(error){
            console.log(error)
        })
    }
})

參考文章:
[JS] AJAX 筆記
AJAX 教程